<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa " to="/wash">
                    <i class="el-icon-arrow-left  f40 cfff"></i>
                </router-link>
                    专业洗车
            </h1>
        </header>
        <main class="p20 f25">
            <section class="main-station bcfff mb20 f20">
                <img class="pic mb40" :src="contentArr.licensePicture">
                <h1 class="f30 fn mb15"> {{contentArr.name}} </h1>
                <div class="wrap flex mb20 f16">
                    <div class="mr20">
                        <el-rate v-model="contentArr.star" disabled score-template="{contentArr[0].star}" style="display:inline-block;">
                        </el-rate>
                        <span class="f25">{{ contentArr.star }}分</span>
                    </div>
                    <div class="f25">
                        <!-- 销量：<span >{{ obj.saleNum }}</span> -->
                        销量：<span >999</span>
                    </div>
                </div>
                <div class="wrap flex">
                    <div>
                        <!-- <p class="mb20">营业时间：{{obj.date}}   {{obj.time}}</p> -->
                        <p class="mb20">营业时间：周一至周五 09:00-22:00</p>
                        <p> 位置：{{contentArr.location}}
                            <img class="plane ml25" @click="onNavigation" src="../../../assets/img/wash-car-img/plane.png">
                        </p>
                    </div>
                </div>
            </section>
            <section class="main-service bcfff mb20">
                <div class="wrap mb20 ">
                    <h1 class="f30 fn">服务项目</h1>
                </div>
                <div class="wrap  mb20 f25">
                   <label v-for="el in serviceArr" :key="el.id" >
                        <i class="el-icon-success f25 mr5" @click="onHandle(el.id,$event)"></i>{{ el.serviceItem }}
                   </label>
                </div>
                <div class="line w100" style="height:2rem"></div>
                <serviceCom :serviceList="serviceList" :obj="obj"></serviceCom>
            </section>
            <section class="main-appraise bcfff mb20">
                <div class="wrap mb20 ">
                    <div>
                        <h1 class="f30 fn">服务评价</h1>
                    </div>
                </div>
                <div class="content mb20 flex f20" v-for=" el in arr" >
                    <!-- <img class="avatar mr25" :src="el.picture"> -->
                    <img class="avatar mr25" :src="url">
                    <div class="fg1">
                        <div class="flex jcsb mb20">
                            <h2 class="f25 ">{{ el.userName }}</h2>
                            <!-- <span class="c808">{{ el.time }}</span> -->
                            <span class="c808">2022-12-31</span>
                        </div>
                        <div class=" mb30">
                            <el-rate v-model="el.star" disabled score-template="{el.star}" style="display:inline-block;">
                            </el-rate>
                        </div>
                        <div>
                            <p class="f20"> {{el.commentContent}}</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <ul class="footer  bcff  flex pf w100 jcsb f20 aic">
            <li>
                <a class="c000 ml20" @click="onShow">
                    <img class="waiter mr10 " src="../../../assets/img/wash-car-img/waiter.png">
                    联系客服
                </a>
            </li>
            <li>
                <router-link :to="{
                    name:'confirmOrder',
                    params:{id,serviceList,storeInfo:contentArr}
                    }" class="pay-order f25  mr20">
                    <span class="cfff">立即下单</span>
                </router-link>
            </li>
        </ul> 
         <ul class="call tc bcff w100 pf f25" v-show="isCall">
            <li>
                <span>{{tel}}</span>
            </li>
            <div class="line " style="height:2rem"></div>
            <li>
                <span>复制</span>
            </li>
            <div class="line " style="height: 7rem;"></div>
            <li>
                <span @click="onCancel">取消拨号</span>
            </li>
        </ul>
       <div class="shade pa" v-show="isShade" ></div>
    </div>
</template>
<script>
import { queryServices } from '../../../api/wash';
import { storeList } from '../../../api/wash';
import { washComment } from '../../../api/wash';
// import service from '../../../utils/request';
import serviceCom  from './serviceCom.vue';
export default{
    components:{serviceCom},
    mounted(){
       this.init();  
    },
    methods:{
        onHandle(id,e){
            if(id){
                if(e.target.className.indexOf('active')>=0){
                    e.target.classList.remove("active");
                    for(let i =0;i<this.serviceList.length;i++){
                        if(this.serviceList[i].id==id){
                            this.serviceList.splice(i,1);
                        }
                    }
                }else{
                    e.target.classList.add('active');
                    let arr1 = this.serviceArr.filter((item)=>{
                        if(item.id){
                            if(item.id ==id){
                                return  item;
                            }
                        }
                    })
                    this.serviceList.push(arr1[0]);
                }

            }
        },
        init(){//初始化页面
            //当前门店的id
            this.id = this.$route.params.id;
            //门店详情
            storeList({
                categoryId: 2
            }).then(r=>{
                let res =JSON.parse(JSON.stringify(r.data));
                let arr = res.filter((item,value,res)=>{
                    return item.id ==this.id;
                })
                if(arr[0]){
                    this.contentArr = JSON.parse(JSON.stringify(arr[0]));
                    // sessionStorage.setItem("washStore",JSON.stringify(arr[0]));
                    this.tel = this.contentArr.tel;
                    this.storeName = this.contentArr.name;
                    // console.log(this.storeName,"1");
                    queryServices({
                        business:this.storeName,
                        // id: 1,
                        categoryId: 2
                    }).then(r=>{
                        this.serviceArr = r.data.list;
                        // console.log(this.serviceArr);
                    })
                }
            });
            //评价
            washComment({
                serviceId: "2"
            }).then(r=>{
                let res = r.data.list;
                this.arr = res.filter((item,value,res)=>{
                    return item.serviceId =="2";
                })
            }) 
        },   
        onShow(){
            this.isCall = true;
            this.isShade = true;
        },
        onCancel(){
            this.isCall = false;
            this.isShade = false;
        },
        onNavigation(){
            this.$router.push('storeDetailsNavigation')
        }
    },
    data(){
        return{
            storeName:"",
            id:"",
            isCall:false,
            isShade:false,
            tel:"",
            url:require('../../../assets/img/home-img/bg.png'),
            arr:[],
            serviceArr:[],
            serviceList:[],
            contentArr:{},
            obj:{
                // realPrice:"￥35.9",
                // falsePrice:"￥60",
                info:'这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍'
            }
             
        }
    }
}
</script>
<style scoped>
.dblock{display: block;}
.dnone{display: none;}
.active{color: green;}
>>>.el-rate__icon{font-size: 35rem;}
a{color: #333;}
.c000{color: #000;}
.lh40{line-height: 40rem;}
.cff4{color: #ff4000;}
.c808{color:#808080}
.line{height: 1rem;background-color: #f7f7f7;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
section.main-station  img.pic{width: 650rem;height: 420rem;margin: 0 auto;border-radius: 15rem;} 
section.main-station  img.plane{width: 30rem;height: auto;vertical-align: middle;} 
/* 服务项目 */
section.main-service .wrap label{margin-right: 30rem;}
section.main-service .wrap input{margin-right: 15rem;height: 20rem;width: 20rem;vertical-align: middle;}
/* 服务评价 */
section.main-appraise .content {padding-bottom: 30rem; border-bottom: 2rem solid #f7f7f7;}
section.main-appraise :last-child{padding-bottom: 0; border-bottom: none;}
section.main-appraise img.avatar{width: 110rem;height: 110rem;border-radius: 50%;}
/* 页脚 */
ul.footer{height: 115rem;left: 0; bottom:0;padding: 0 20rem;box-sizing: border-box; background-color: #fff;}
ul.footer img.waiter{height: 40rem; width: auto;vertical-align: middle;}
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 50rem;border-radius: 50rem;}
/* 洗车-拨号 */
ul.call {height: 305rem;left: 0; bottom:0;background-color: #fff;padding: 20rem 0; border-radius: 20rem  20rem  0 0;z-index: 10;}
ul.call li{height: 100rem;line-height: 100rem;}
.shade{width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);top: 0;left: 0;}
</style>